.common-container {
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;
}

.common-image-corner {
  // padding: $uni-spacing-col-sm $uni-spacing-row-sm;
  margin-right: $uni-spacing-row-base;

  // background:
  //   radial-gradient(circle at 100% 100%, transparent 8px, $uni-color-primary 0) top left,
  //   radial-gradient(circle at 0% 100%, transparent 8px, $uni-color-primary 0) top right,
  //   radial-gradient(circle at 0 0, transparent 8px, $uni-color-primary 0) bottom right,
  //   radial-gradient(circle at 100% 0, transparent 8px, $uni-color-primary 0) bottom left;
  // background-repeat: no-repeat;
  // background-size:
  //   10px 10px,
  //   10px 10px,
  //   10px 10px,
  //   10px 10px;
  // border-radius: 10px;

  > image {
    width: 100%;
    height: 100%;
    border-radius: $uni-border-radius-lg;
    box-shadow: $uni-shadow-base;
  }
}

// 公共分享按钮
.common-share-btn {
  position: fixed;
  bottom: 80rpx;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 294rpx;
  height: 72rpx;
  font-size: 28rpx;
  color: #000000d9;

  // background: repeating-linear-gradient(
  //   to bottom right,
  //   rgba($color: $uni-color-primary, $alpha: 50%) rgba($color: $uni-color-success, $alpha: 50%)
  // );
  // box-shadow: $uni-shadow-base;
  background: linear-gradient(155.42deg, #f6f6f6 -32.39%, #f1f1f1 128.45%);
  box-shadow: 0 6rpx 4rpx -4rpx #0000001a;
  transform: translateX(-50%);

  .share-icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
  }
}

// 公共状态标签
.common-status-tag {
  padding: 5px 8px !important;
  margin-top: $uni-spacing-col-sm !important;
  font-size: $uni-font-size-sm !important;
  border-radius: 20px !important;
}

// 公共头部 tab 列表
.common-tab-list-wrap {
  position: relative;
  padding-top: 46px;

  .common-header-tabs {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .scroll-view {
    position: relative;
    height: calc(100vh - 46px);
  }
}

.common-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.common-page-bg {
  min-height: 100vh;
  background: #F4F7FC;
}

// 单行省略，优先使用 unocss: text-ellipsis
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 两行省略
.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 三行省略
.ellipsis-3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

// 详情页面样式
.common-detail {
  &-container {
    .detail-footer {
      padding: 0 30rpx;
      margin-top: 60rpx;
    }
  }

  &-info {
    &-header {
      width: 100%;
      height: 400rpx;
      height: 56.25vw; // 16 / 9比例

      video,
      image {
        width: 100%;
        height: 100%;
      }
    }

    &-body {
      padding: 18rpx 30rpx;

      .detail-info {
        &-title {
          position: relative;
          display: flex;
          align-items: center;
          padding-left: 28rpx;
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          color: #000000d9;

          &__line {
            position: absolute;
            top: 6rpx;
            bottom: 6rpx;
            left: 4rpx;
            width: 8rpx;
            background: #007aff;
            border-radius: 2rpx;
          }
        }

        &-desc {
          padding: 18rpx;
          margin-top: 20rpx;
          font-size: 28rpx;
          background: #f6f6f6;
          border-radius: 10rpx;
        }

        &-others {
          .others {
            &-line {
              width: 100%;
              height: 2rpx;
              margin: 20rpx 0;
              background: #efefef;
            }

            &-item {
              display: flex;
              font-size: 28rpx;
              line-height: 44rpx;

              &.block {
                display: block;
              }

              &__label {
                display: flex;
                align-items: center;

                &-icon,
                &-text {
                  margin-right: 12rpx;
                }
              }

              &__value {
                display: flex;
                align-items: center;
                color: #007aff;
              }
            }
          }
        }
      }
    }
  }
}
